<script setup lang="ts">
import { useAnvilCodeStore } from '../../store/modules/code';

interface BreadCrumbItem {
  label: string;
  toType?: 'json' | 'func';
  to?: string;
  supportTo: boolean;
}

const props = defineProps({
  separator: {
    type: String,
    default: ''
  },
  separatorIcon: {
    type: String,
    default: ''
  },
  items: {
    type: Array<BreadCrumbItem>,
    default: () => []
  },
  supportTo: {
    type: Boolean,
    default: false
  }
});

const getTo = (item: BreadCrumbItem) => {
  const { to, supportTo, toType } = item;
  if ((props.supportTo || supportTo) && to) {
    try {
      if (toType == 'func') {
        const anvilCodeStore = useAnvilCodeStore();
        // 获取当前表单实例
        const { instance } = anvilCodeStore.getCurPageForm;
        return instance[to]();
      } else {
        return JSON.parse(to);
      }
    } catch (e) {
      console.log('getTo error!', e);
    }
  } else {
    return undefined;
  }
};
</script>

<template>
  <div class="anvil-code-breadcrumb">
    <el-breadcrumb :separator="separator" :separator-icon="separatorIcon.replace('ep:', '')">
      <el-breadcrumb-item class="anvil-code-breadcrumb-item" v-for="(item, index) in items" :key="index" :to="getTo(item)">
        {{ item.label }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
